<script setup lang="ts">
import { shopSwiper, shopType, show } from "../api/shop";
import { reactive } from "vue";
// var myElement = document.querySelector(".intelligent-header");
// construct an instance of Headroom, passing the element
// var headroom = new Headroom(myElement);
// initialise
// headroom.init();
const data = reactive({
  type: [],
});
shopTypeApi();
async function shopTypeApi() {
  const res = await shopType("get", "", "");
  console.log(res);
  if (res.status == 200) {
    data.type = res.data.data;
  }
}
</script>

<template>
  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div> -->
  <header class="pl-155 pr-155 intelligent-header">
    <div class="header-area header-area-2">
      <div class="container-fluid p-0">
        <div class="row g-0">
          <div class="col-lg-3 col-md-6 col-6">
            <div class="logo">
              <a href="index.html"
                ><img src="static/picture/logo.png" alt=""
              /></a>
            </div>
          </div>
          <div class="col-lg-6 menu-none-block menu-center">
            <div class="main-menu">
              <nav>
                <ul>
                  <li><a href="#">Home</a></li>
                  <li>
                    <a href="#">Shop</a>
                    <div class="mega-dropdown width-col3">
                      <ul class="single-mega-width">
                        <li v-for="item in data.type" :key="item">
                          <a href="shop-grid-view-3-col.html">{{
                            item.type_name
                          }}</a>
                        </li>
                      </ul>
                      <ul class="single-mega-width2">
                        <li class="menu-pading-none menu-mrg-nn">
                          <div class="mega-item-img">
                            <a href="javascript:;">
                              <img src="static/picture/1.png" alt="" />
                            </a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#">Shopping Cart</a>
                    <!-- <ul class="dropdown">
                                            <li><a href="">about us</a></li>
                                            <li><a href="cart.html">cart</a></li>
                                            <li><a href="checkout.html">checkout</a></li>
                                            <li><a href="wishlist.html">wishlist</a></li>
                                            <li><a href="contact.html">contact</a></li>
                                            <li><a href="login.html">login</a></li>
                                            <li><a href="register.html">register</a></li>
                                        </ul> -->
                  </li>
                  <li>
                    <a href="#">User</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-6">
            <div class="header-search-cart">
              <div class="header-search common-style">
                <button class="sidebar-trigger-search">
                  <span class="ion-ios-search-strong"></span>
                </button>
              </div>
              <div class="header-cart common-style">
                <button class="sidebar-trigger">
                  <span class="ion-bag"></span>
                </button>
              </div>
              <div class="header-sidebar common-style">
                <button class="header-navbar-active">
                  <span class="ion-navicon"></span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="mobile-menu-area d-md-block col-md-12 col-lg-12 col-12 d-lg-none d-xl-none"
          >
            <div class="mobile-menu">
              <nav id="mobile-menu-active">
                <ul class="menu-overflow">
                  <li>
                    <a href="#">HOME</a>
                    <ul>
                      <li><a href="index.html">furniture</a></li>
                      <li><a href="index-electronics.html">electronics</a></li>
                      <li><a href="index-fashion.html">fashion</a></li>
                      <li><a href="index-jewellery.html">jewellery</a></li>
                      <li><a href="index-food-drink.html">food & drink</a></li>
                      <li><a href="index-toys.html">Toys & Games</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">pages</a>
                    <ul>
                      <li><a href="">about us</a></li>
                      <li><a href="cart.html">cart</a></li>
                      <li><a href="checkout.html">checkout</a></li>
                      <li><a href="wishlist.html">wishlist</a></li>
                      <li><a href="contact.html">contact</a></li>
                      <li><a href="login.html">login</a></li>
                      <li><a href="register.html">register</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">shop</a>
                    <ul>
                      <li>
                        <a href="shop-grid-view-3-col.html">grid 3 column</a>
                      </li>
                      <li>
                        <a href="shop-grid-view-5-col.html">grid 5 column</a>
                      </li>
                      <li>
                        <a href="shop-grid-view-sidebar.html"
                          >grid with sidebar</a
                        >
                      </li>
                      <li>
                        <a href="shop-list-view-1-col.html">list 1 column</a>
                      </li>
                      <li>
                        <a href="shop-list-view-2-col.html">list 2 column</a>
                      </li>
                      <li>
                        <a href="shop-list-view-sidebar.html"
                          >list with sidebar</a
                        >
                      </li>
                      <li>
                        <a href="shop-list-view-1-col-container.html"
                          >list 1 column box</a
                        >
                      </li>
                      <li><a href="product-details.html">tab style 1</a></li>
                      <li><a href="product-details-2.html">tab style 2</a></li>
                      <li><a href="product-details-3.html">tab style 3</a></li>
                      <li><a href="product-details-6.html">sticky style</a></li>
                      <li>
                        <a href="product-details-7.html">sticky style 2</a>
                      </li>
                      <li>
                        <a href="product-details-8.html">gallery style</a>
                      </li>
                      <li>
                        <a href="product-details-9.html">gallery style 2</a>
                      </li>
                      <li>
                        <a href="product-details-4.html">fixed image style</a>
                      </li>
                      <li>
                        <a href="product-details-5.html">fixed image style 2</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">BLOG</a>
                    <ul>
                      <li><a href="blog.html">blog </a></li>
                      <li><a href="blog-2-col.html">blog 2 column</a></li>
                      <li>
                        <a href="blog-left-sidebar.html">blog left sidebar</a>
                      </li>
                      <li><a href="blog-details.html">blog details</a></li>
                    </ul>
                  </li>
                  <li><a href="contact.html"> Contact </a></li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="header-space"></div>
</template>

<style scoped>
.header-space {
  width: 100%;
  height: 101px;
}
</style>
